<template>
  <div class="console-example">
    <div class="search">
      <div class="right">
        <el-select v-model="status" placeholder="请选择站点状态" @change="getList">
          <el-option label="全部状态" value=""></el-option>
          <el-option label="正常" :value="10"></el-option>
          <el-option label="禁用" :value="20"></el-option>
        </el-select>
        <el-input v-model="search" style="width: 100%;margin-left: 10px;" placeholder="请输入站点名称" clearable @change="getList" @clear="getList"></el-input>
      </div>
      <div class="btn">
        <el-button type="primary" @click="addWebsite">添加网站</el-button>
        <!-- <el-button type="primary" @click="addMedia">添加自媒体</el-button>
        <el-button type="primary" @click="onOrOff">云端批量开关</el-button>
        <el-button @click="visible2 = true">新手必读</el-button> -->
      </div>
    </div>
    <div class="tableBtn btn">
      <el-select v-model="siteGroupId" placeholder="请选择站点状态" @change="getList">
        <el-option label="全部站点" value=""></el-option>
        <el-option v-for="item in statusOption" :key="item.site_group_id" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px;" size="mini" @click="addGroups">新建分组</el-button>
      <el-button type="primary" size="mini" @click="editGroup">编辑分组</el-button>
      <el-button type="primary" size="mini" @click="delSiteGroup">删除分组</el-button>
      <el-button type="danger" size="mini" @click="getDeleteMore" :loading="dm_loading">批量删除</el-button>
    </div>
    <div>
      <el-table :data="pageInfo.data"
        v-loading="loading" style="width: 100%"
        @selection-change="handleSelectionChange"
        :cell-style="{'height': '40px','padding': '8px 0'}"
        :header-cell-style="{'background-color': '#eef1ff','color': '#2c2c2c'}"
        >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column label="网站/媒体" prop="name" width="300">
          <!-- <el-button size="mini">新站点</el-button><el-link>{{ scope.row.name }}</el-link> -->
        </el-table-column>
        <el-table-column align="center" prop="record_num" label="记录">
        </el-table-column>
        <el-table-column align="center" prop="gather_num" label="采集">
        </el-table-column>
        <el-table-column align="center" prop="original_num" label="原创">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="接口配置" placement="bottom">
              <el-button icon="el-icon-upload" type="text" @click="goLink('/console/example/secureindex',scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="任务目标管理" placement="bottom">
              <el-button icon="el-icon-film" type="text" @click="goLink('/console/example/secure',scope.row)"></el-button>
            </el-tooltip>
           <el-tooltip class="item" effect="dark" content="功能细节设置" placement="bottom">
              <el-button icon="el-icon-share" type="text" @click="goLink('/console/example/mirror-image',scope.row)"></el-button>
            </el-tooltip>
              <!--<el-tooltip class="item" effect="dark" content="手动运行测试" placement="bottom">
              <el-button icon="el-icon-video-play" type="text" @click="goLink('/console/account/recharge',scope.row)"></el-button>
            </el-tooltip> -->
            <el-tooltip class="item" effect="dark" content="文章暂存库" placement="bottom">
              <el-button icon="el-icon-coin" type="text" @click="goLink('/console/account/withdrawal',scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="编辑站点" placement="bottom">
              <el-button type="text" icon="el-icon-edit" style="margin-left: 10px;" @click="editSite(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除站点" placement="bottom">
              <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='取消'
                icon="el-icon-info"
                icon-color="red"
                title="确定删除该站点吗？"
                @confirm="delSite(scope.row)"
              >
                <el-button slot="reference" type="text" icon="el-icon-delete" style="margin-left: 10px;"></el-button>
              </el-popconfirm>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagenation">
      <el-pagination :current-page="pageInfo.current" :page-sizes="[10, 20, 30, 50]" :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <el-dialog :title="`${title}站点`" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" ref="form" class="demo-ruleForm">
        <el-form-item
          prop="siteName"
        >
          <div>请输入要{{title}}的站点名称：</div>
          <div style="display: flex;">
            <!-- <el-select v-model="form.accord" placeholder="请选择站点状态">
              <el-option label="http://" value="http://"></el-option>
              <el-option label="https://" value="https://"></el-option>
            </el-select> -->
            <el-input v-model="form.siteName" placeholder="如：www.abc.com" autocomplete="off"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addWebDomain">{{title}}网站</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加自媒体" :visible.sync="visible" width="30%">
      <el-dialog
        width="30%"
        title="添加自媒体"
        :visible.sync="innerVisible"
        append-to-body>
        <div>此功能用于批量导入Cookie创建自媒体站点，微信公众号由于未使用Cookie授权，暂不支持批量导入。</div>
        <el-select v-model="type" style="width: 100%;" placeholder="请选择您需要的接口">
          <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value">
          </el-option>
        </el-select>
        <div style="margin: 1% 0;">
          <el-input
            type="textarea"
            :rows="10"
            placeholder="Cookie粘贴在此处，每行一个"
            v-model="textarea">
          </el-input>
        </div>
        <el-input
          type="textarea"
          :rows="6"
          placeholder="运行记录"
          v-model="textarea">
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="visible = false">确定添加</el-button>
        </span>
      </el-dialog>
      <div>
        <p>此功能用于自媒体用户或没有网站但需要采集、生成文章的用户。</p>
        <p>此功能将生成一个可操作的内部域名，可用于绑定自媒体账号（实现自动发布），也可以不绑定（不自动发布）。</p>
        <p>如需绑定自媒体账号自动发布，请到左侧栏“接口文件配置”页面选择对应自媒体接口，按教程操作绑定。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false">单个添加</el-button>
        <el-button @click="innerVisible = true">批量添加</el-button>
      </span>
    </el-dialog>
    <el-dialog title="云端运行批量开关" :visible.sync="visible1" width="20%">
      <div>请选择操作对象：</div>
      <el-select v-model="type" style="width: 100%;" placeholder="请选择您需要的接口">
        <el-option label="当前勾选站点" :value="1"></el-option>
        <el-option label="当前勾选分组" :value="2"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible1 = false">批量开启云端</el-button>
        <el-button @click="visible1 = false">批量关闭云端</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新手必读" :visible.sync="visible2" width="35%">
      <div>运行采集任务之前，哪些设置是必须的？</div>
      <p>1. 添加一个站点。</p>
      <p>2. 为站点添加一个任务，每个任务设定任务目标。</p>
      <p>3. 如果使用私有词库，需要先上传关键词再添加任务才能绑定。</p>
      <p>4. 功能细节设置页面完成设置，点击保存按钮。</p>
      <el-divider></el-divider>
      <div>多久才能采集到文章？</div>
      <p>1. 每个站点首次运行采集任务，需要等待几分钟才能采集到文章，后续运行任务会快一些。</p>
      <p>2. 不同关键词内容丰富程度不同，尽量多添加关键词，少使用指定网站采集，可以提高采集效率。</p>
      <el-divider></el-divider>
      <div>采集到文章后，如何获取文章内容？</div>
      <p>1. 如需自动发布到站点，请配置接口文件，并把文章交付方式设为自动发布。</p>
      <p>2. 如需手动获取文章，或需先编辑再发布，请把文章交付方式设为手动发布。</p>
      <el-divider></el-divider>
      <div>如何开启采集任务？</div>
      <p>1. 手动运行测试页面可以自行开启和关闭任务，点击停止按钮或关闭页面后任务就会停止。</p>
      <p>2. 功能细节设置页面设有自动运行开关，开启之后服务器即会自动运行任务。</p>
      <el-divider></el-divider>
    </el-dialog>
    <el-dialog title="提示信息" :visible.sync="visible3" width="30%">
      <div v-if="editType == 'add'">请输入要创建的分组名称：</div>
      <div v-if="editType == 'edit'">请输入要修改的分组名称：</div>
      <el-input v-model="groupName" clearable></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addGroup">确定</el-button>
        <el-button @click="visible3 = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { list, delSite,group,addGroup,delSiteGroup,add,editGroup,edit, deleteMore } from '@/api/example'
import request from '@/utils/request'
import dayjs from 'dayjs';
export default {
  name: 'Example',
  data () {
    return {
      dialogVisible: false,
      search: '',
      status: '',
      visible:false,
      visible1: false,
      visible2: false,
      visible3: false,
      innerVisible: false,
      editType: 'add',
      title: '创建',
      type: 1,
      groupName: '',
      siteGroupId: '',
      statusOption: [],
      typeOption: [
        {
          name: '百家号',
          value: 1
        }, {
          name: '搜狐号',
          value: 2
        }, {
          name: '头条号',
          value: 3
        }, {
          name: '小红书',
          value: 4
        }, {
          name: 'CSDN',
          value: 5
        }, {
          name: '知乎',
          value: 6
        }, {
          name: 'B站',
          value: 7
        },
      ],
      pageInfo: {
        per_page: 15,
        current_page: 1,
        total: 0,
        param: {},
        records: [{
          link: 'd9141c.mp 未绑定',
          jilu: 0,
          caiji: 0,
          yuanchuang: 0
        }]
      },
      textarea: '',
      form: {
        accord: 'http://',
      },
      multipleSelection: [],
      couponList: [],
      loading: false,
      comp: [],
      dm_loading: false
    }
  },
  computed: {
    key () {
      return this.$route.path
    },
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.getList()
  },
  methods: {
    fmtSe(e) {
      return dayjs(e).format('YYYY-MM-DD HH:mm:ss')
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val;
    },
    searchInput(val) {
      console.log(val)
    },
    goLink(url,row) {
      // console.log(row)
      this.$router.push({path:url,query:{item:JSON.stringify(row)}})
    },
    delSite(row) {
      console.log(row)
      delSite({siteId: row.site_id}).then(res => {
        if (res.status == 200) {
          this.$message.success(res.message)
        }
      })
    },
    getList() {
      const query = {
        search: this.search,
        status: this.status,
      }
      list(query).then(res => {
        console.log(res)
        this.pageInfo = res.data.list
      })
      group().then(res=> {
        console.log(res)
        this.statusOption = res.data.list
      })
    },
    handleSizeChange (val) {
      this.pageInfo.size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.pageInfo.current = val
      this.getList()
    },
    addWebDomain() {
      if (this.title == '创建') {
        const param = {
          form: {
            name: this.form.siteName,
            siteGroupId: '0'
          }
        }
        add(param).then(res => {
          this.$message.success(res.message)
          this.dialogVisible = false
          this.getList()
        })
      } else {
        const param = {
          form: {
            name: this.form.siteName,
            siteGroupId: '0'
          }
        }
        edit(param, this.siteId).then(res => {
          this.$message.success(res.message)
          this.dialogVisible = false
          this.getList()
        })
      }
    },
    addWebsite() {
      this.dialogVisible = true
      this.title = '创建'
    },
    editSite(row) {
      console.log(row)
      this.dialogVisible = true
      this.title = '编辑'
      this.form.siteName = row.name
      this.siteId = row.site_id
    },
    addMedia() {
      this.visible = true
    },
    addGroups() {
      this.visible3 = true
      this.editType = 'add'
    },
    addGroup() {
      if (this.groupName) {
        if (this.editType == 'add') {
          const param = {
            form: {
              name: this.groupName,
              sort: '100'
            }
          }
          addGroup(param).then(res=> {
            if (res.status == 200) {
              this.$message.success(res.message)
              this.visible3 = false
              this.getList()
            }
          })
        } else {
          let siteId = ''
          this.statusOption.map(item => {
            if (item.name == this.siteGroupId) {
              siteId = item.site_group_id
            }
          })
          const param = {
            form: {
              name: this.groupName,
              siteGroupId: siteId,
              sort: '100'
            }
          }
          editGroup(param).then(res=> {
            if (res.status == 200) {
              this.$message.success(res.message)
              this.visible3 = false
              this.getList()
            }
          })
        }
      }else {
        this.$message.error('请输入分组名称')
      }
    },
    editGroup() {
      this.visible3 = true
      this.groupName= this.siteGroupId
      this.editType = 'edit'
    },
    delSiteGroup() {
      if (this.siteGroupId) {
        this.$confirm('确认删除该分组吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delSiteGroup({siteGroupId:this.siteGroupId}).then(res => {
            this.$message.success(res.message)
            this.getList()
          })
        }).catch(() => {
        });
      }else {
        this.$message.error('所选分组不能删除')
      }
    },
      getDeleteMore: function () {
        if (this.multipleSelection.length > 0) {
            this.dm_loading = true
            let siteId = this.multipleSelection.map(item => {
                return item.site_id
                })
            let obj = {
              siteIds: siteId
            }
            deleteMore({form: obj}).then(res => {
                console.log(res)
                this.$message.success(res.message)
                this.dm_loading = false
                this.getList()
            }).catch(err => {
                this.dm_loading = false
            })
        } else {
            this.$message({
                showClose: true,
                message: '请选择要批量删除的内容'
            });
        }
    },
    onOrOff() {
      this.visible1 = true
    },
    goGoods() {
      this.$router.push('/market-cloud/index')
    }
  }
}
</script>
<style lang="scss">
.el-card__body {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.console-example {
  width: 100%;
  height: calc(100% - 20px);
  background-color: #fff;
  padding-top: 20px;

  .tooltip {
    color: red;
    padding: 15px;
    font-size: 14px;
  }
  .dialog-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .btn {
    padding-bottom: 15px;
  }
  .search {
    display: flex;
    justify-content: space-between;
    .right {
      flex: 1;
      display: flex;
    }
  }
  .btnr {
    margin-right: 10px;
  }
  .pagenation {
    text-align: center;
    padding: 20px;
  }
}
</style>
